<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>React Document</title>
</head>
<body>
  <div id='test'></div>
  <script src='../js/react.development.js'></script>
  <script src='../js/react-dom.development.js'></script>
  <script src='../js/babel.min.js'></script>
  <script type='text/babel'>
    class Login extends React.Component {
      handleSubmit = (e) => {
        const {username, password} = this
        e.preventDefault()
        console.log(username.value)
      }
      handleInput = (e) => {
        console.log(e.target.value);
      }
      render() {
        return (
          <form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
            用户名：<input ref={c => this.username=c} onChange={this.handleInput} type="text" name="username"/>
            密码：<input ref={c => this.password=c} type="text" name="password"/>
            <button>登录</button>
          </form>
        )
      }
    }
    ReactDOM.render(<Login/>, document.getElementById('test'))
  </script>
</body>
</html>
<!--
  onXxxx绑定的事件处理函数：React使用的是自定义的事件而不是原生的事件，为的是更好的兼容性。事件通过事件委托方式处理，为的是高效。可以通过event.target得到事件的DOM元素对象。

  受控组件：受控组件是必须要有value的，value用来传入一个参数，结合onchang来控制这个参数输出。每当value变化的时候，都会调用onchange的方法，事件处理器拿到新的值之后就会重新渲染视图，更新表单。如文本框、下拉框、多选框

  非受控组件：不受状态的控制，获取数据相当于操作dom
 -->